<template>
  <div>
    <h3>我是父组件</h3>
    <div>--------------------------------------</div>
    <!-- 在1组件中试验默认插槽和具名插槽 -->
    <slot_1>
      <template v-slot:default>默认插槽</template>
      <template v-slot:header>
        具名插槽
      </template>
    </slot_1>
    <div>--------------------------------------</div>
    <!-- 在2组件中试验作用域插槽 -->
    <slot_2>
      <template v-slot:footer="{ user }">
        {{ user }}
      </template>
    </slot_2>
  </div>
</template>
<script>
/* 

  什么是插槽？
    ==>默认插槽
      <ChildenSlot>
        我是默认插槽的内容
      </ChildenSlot>
    ==>具名插槽
      +在父组件中
        <template v-slot:header>
            我是子组件标签内的内容，而且还是有名字的，我被称为具名插槽
        </template>
      +在子组件中
        <slot name="header"></slot>
    ==>作用域插槽
      +在父组件中(插槽props解构)
        <ChildenSlot v-slot:default="{ user }">{{ user.firstName }} </ChildenSlot>
        <ChildenSlot >
          <template v-slot:default="{ user }">
              {{ user.firstName }} 
          </template>
        </ChildenSlot>
      +在子组件中
        <slot :user="user" >{{ user.lastName}}</slot>

    
*/

/* 
  注意点
    1、父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
    2、<slot></slot>标签里面的内容会作为后备内容且有默认的名字default
    3、(特殊：独占默认插槽的缩写语法)---只要出现多个插槽，请始终为所有的插槽使用完整的基于 <template> 的语法，v-slot 只能添加在 <template> 上 
    4、作用域插槽:绑定在 <slot> 元素上的 attribute 被称为插槽 prop
    5、#简写： #default="{ user }"


*/
import { slot_1, slot_2 } from "./components/";
export default {
  data() {
    return {};
  },
  components: {
    slot_1,
    slot_2,
  },
};
</script>

<style></style>
